<template>
  <div>
    <div >
     <van-dropdown-menu active-color="#1989fa">
       <van-dropdown-item v-model="value1" :options="option1" title="周边游"/>
        <van-dropdown-item v-model="value2" :options="option2" title="位置区域"/>
        <van-dropdown-item v-model="value3" :options="option3" title="离我最近"/>
        <van-dropdown-item v-model="value4" :options="option4" title="筛选"/>
     </van-dropdown-menu>
    </div>
  </div>
</template>

<script>
import Vue from 'vue';
import { DropdownItem,DropdownMenu } from 'vant';
Vue.use(DropdownMenu);
Vue.use(DropdownItem);
export default {
  data() {
    return {
      show:false,
         value1: 0,
      value2: 'a',
       value3: 0,
      value4: 'a',
      option1: [
        { text: '全部', value: 0 },
        { text: '景点/门票', value: 1 },
        { text: '温泉', value: 2 },
        { text: '主题公园', value: 3 },
        { text: '展览馆', value: 4 },
        { text: '水上乐园', value: 5 },
        { text: '动植物园', value: 6 },
        { text: '海洋馆', value: 7 },
        { text: '滑雪', value: 8 },
        { text: '高空观景', value: 9 },
        { text: '漂流', value: 10 },
        { text: '其他游玩', value: 11 },
      ],
      option2: [
        { text: '默认排序', value: 'a' },
        { text: '好评排序', value: 'b' },
        { text: '销量排序', value: 'c' },
      ],
        option3: [
        { text: '智能排序', value: 0 },
        { text: '离我最近', value: 1 },
        { text: '评价最高', value: 2 },
        { text: '人气最高', value: 2 },
      ],
      option4: [
        { text: '默认排序', value: 'a' },
        { text: '好评排序', value: 'b' },
        { text: '销量排序', value: 'c' },
      ],
    };
  },
  methods: {},
};

</script>

<style lang='scss'scoped>
// .xi{
//   // position: fixed;
//   // top:47px;
// }
</style>
